<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记忆翻牌游戏 - Scrapbook Style</title>
    <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <!-- 装饰背景元素 -->
        <div class="scrapbook-decoration tape1"></div>
        <div class="scrapbook-decoration tape2"></div>
        <div class="scrapbook-decoration tape3"></div>
        <div class="scrapbook-decoration sticker1">🌟</div>
        <div class="scrapbook-decoration sticker2">🎈</div>
        <div class="scrapbook-decoration polaroid-frame"></div>

        <!-- 游戏标题区域 -->
        <header class="game-header PolaroidEffect">
            <h1 class="handwritten-title">
                <i class="fas fa-brain"></i> 记忆翻牌
            </h1>
            <p class="subtitle">挑战你的记忆力！</p>
        </header>

        <!-- 游戏信息栏 -->
        <div class="game-info-container">
            <div class="info-card PolaroidEffect">
                <div class="info-item">
                    <i class="fas fa-trophy"></i>
                    <span>分数: <span id="score">0</span></span>
                </div>
                <div class="info-item">
                    <i class="fas fa-redo"></i>
                    <span>尝试: <span id="attempts">0</span>/3</span>
                </div>
            </div>

            <div class="difficulty-selector PolaroidEffect">
                <label>难度选择:</label>
                <select id="difficulty">
                    <option value="easy">简单 (4张牌)</option>
                    <option value="medium" selected>中等 (6张牌)</option>
                    <option value="hard">困难 (8张牌)</option>
                </select>
            </div>
        </div>

        <!-- 游戏区域 -->
        <div class="game-container">
            <!-- 开始界面 -->
            <div id="startScreen" class="game-screen active">
                <div class="start-content PolaroidEffect">
                    <h2>欢迎来到记忆翻牌游戏！</h2>
                    <div class="game-rules">
                        <h3>游戏规则：</h3>
                        <ul>
                            <li>仔细观察显示的卡牌和位置</li>
                            <li>卡牌翻转后，选择正确的位置</li>
                            <li>你有3次尝试机会</li>
                            <li>答对越多，分数越高！</li>
                        </ul>
                    </div>
                    <button id="startBtn" class="vintage-btn">
                        <i class="fas fa-play"></i> 开始游戏
                    </button>
                </div>
            </div>

            <!-- 记忆界面 -->
            <div id="memoryScreen" class="game-screen">
                <div class="memory-content">
                    <h2 class="countdown-text">记住这些卡牌！</h2>
                    <div class="countdown-container PolaroidEffect">
                        <span id="countdown">3</span>
                    </div>
                    <div id="cardGrid" class="card-grid"></div>
                </div>
            </div>

            <!-- 测试界面 -->
            <div id="testScreen" class="game-screen">
                <div class="test-content">
                    <h2>卡牌在哪里？</h2>
                    <div class="test-instructions PolaroidEffect">
                        <p>选择下方卡牌，然后点击它原来的位置</p>
                    </div>

                    <div id="cardSelector" class="card-selector"></div>
                    <div id="positionGrid" class="position-grid"></div>

                    <div class="result-container">
                        <div id="resultMessage" class="result-message PolaroidEffect"></div>
                    </div>
                </div>
            </div>

            <!-- 结果界面 -->
            <div id="resultScreen" class="game-screen">
                <div class="result-content PolaroidEffect">
                    <h2 id="resultTitle">游戏结束！</h2>
                    <div class="final-score">
                        <i class="fas fa-star"></i>
                        <span>最终得分: <span id="finalScore">0</span></span>
                        <i class="fas fa-star"></i>
                    </div>
                    <div id="performanceMessage" class="performance-message"></div>

                    <div class="action-buttons">
                        <button id="playAgainBtn" class="vintage-btn">
                            <i class="fas fa-redo"></i> 再玩一次
                        </button>
                        <button id="leaderboardBtn" class="vintage-btn">
                            <i class="fas fa-chart-line"></i> 排行榜
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 排行榜模态框 -->
        <div id="leaderboardModal" class="modal">
            <div class="modal-content PolaroidEffect">
                <span class="close">&times;</span>
                <h2><i class="fas fa-trophy"></i> 排行榜</h2>
                <div id="leaderboardContent" class="leaderboard-content">
                    <!-- 动态加载排行榜数据 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 胶带装饰 -->
    <div class="washi-tape washi-tape-1"></div>
    <div class="washi-tape washi-tape-2"></div>
    <div class="washi-tape washi-tape-3"></div>
    <div class="washi-tape washi-tape-4"></div>

    <script src="{{ url_for('static', filename='js/game.js') }}"></script>
</body>
</html>